/// <reference path="jquery-1.10.2.min.js" />
/// <reference path="jquery-ui-1.10.3.custom.min.js" />
/// <reference path="../css/bootstrap/js/bootstrap.min.js" />

$(document).ready(function () {
    $(".name-drop").draggable({ revert: true, revertDuration: 200, stack: "#resources", cursorAt: { left: 150, top: 40 }, opacity: 0.6 });
    populateQuadrantB();
    if ($("#ddl-quadrant").val() == "A") {
        populateQuadrantA();
    }
    else if ($("#ddl-quadrant").val() == "B") {
        populateQuadrantB();
    }
    else {
        createFloor3F();
    }
    $("#ddl-quadrant").change(function () {
        if ($("#ddl-quadrant").val() == "A") {
            populateQuadrantA();
        }
        else if ($("#ddl-quadrant").val() == "B") {
            populateQuadrantB();
        }
        else {
            createFloor3F();
        }
    });

    $("#search-employee-seat").click(function () {
        window.location = 'search-result.html';
    });

    $('#myModal').modal({ show: false });

    $("#confirmation-btn").click(function () {
        $('.modal-title').empty();
        $('.modal-body').empty();

        $('.modal-title').append('Confirmation Message');
        $('.modal-body').append('<p>Are you sure you would like to submit a request for seat assignments?</p>');
        $('.modal-body').append('<hr>');
        $('.modal-body').append('<h4>New Seat Assignments</h4>');

        $('.modal-body').append('<table id="table-new-seat" class="table table-striped"><thead><tr></tr></thead><tbody></tbody></table>');
        $('#table-new-seat thead tr').append('<th>#</th>');
        $('#table-new-seat thead tr').append('<th>Employee Name</th>');
        $('#table-new-seat thead tr').append('<th>Seat Code</th>');

        $('#table-new-seat tbody').append('<tr></tr>');
        $('#table-new-seat tbody tr').last().append('<td>1</td>');
        $('#table-new-seat tbody tr').last().append('<td>Kimwan Ogot</td>');
        $('#table-new-seat tbody tr').last().append('<td>PIC3FA1-1</td>');

        $('#table-new-seat tbody').append('<tr></tr>');
        $('#table-new-seat tbody tr').last().append('<td>2</td>');
        $('#table-new-seat tbody tr').last().append('<td>Herbert Sayco</td>');
        $('#table-new-seat tbody tr').last().append('<td>PIC3FA1-2</td>');

        $('#table-new-seat tbody').append('<tr></tr>');
        $('#table-new-seat tbody tr').last().append('<td>3</td>');
        $('#table-new-seat tbody tr').last().append('<td>Roanne Abecina</td>');
        $('#table-new-seat tbody tr').last().append('<td>PIC3FA1-3</td>');

        $('.modal-body').append('<hr>');
        $('.modal-body').append('<h4>Seat Transfers</h4>');
        $('.modal-body').append('No Seat Transfer Requests');

        $('.modal-body').append('<hr>');
        $('.modal-body').append('<h4>Employee Seat Removal</h4>');
        $('.modal-body').append('No Employee Seat Removal Requests');

        $('.modal-body').append('<hr>');
        $('.modal-body').append('<div id="submit-success" class="alert alert-success" style="display:none;">Request was successfully Submitted!</div>');
        $("#modal-ok").click(function () {
            $('#submit-success').show('drop');
            $("#modal-ok").attr('disabled', 'disabled');
            $("#modal-cancel").attr('disabled', 'disabled');

            setTimeout(function () {
                $("#myModal").modal('hide');
                $("#modal-ok").removeAttr('disabled');
                $("#modal-cancel").removeAttr('disabled');
            }, 3000);
        });


        $('#myModal').modal('show');
    });

    $("#save-btn").click(function () {
        $("#save-btn").addClass("disabled");
        $("#save-btn").attr("disabled", "disabled");
        $("#save-btn").empty();
        $("#save-btn").html($("#save-btn").attr("data-loading-text"));
        $("#save-success").hide();
        $("#save-success").show("drop");
        setTimeout(function () {
            $("#save-success").hide("drop");
            $("#save-btn").removeClass("disabled");
            $("#save-btn").removeAttr("disabled");

            $("#save-btn").empty();
            $("#save-btn").html("Save Changes");
        }, 3000);

        //$("#save-success").hide("drop").delay(5000);
    });

    $("#modal-cancel").click(function () {
        $("#myModal").modal('hide');
    });

    $("#modal-close").click(function () {
        $("#myModal").modal('hide');
    });

    //    $("#modal-ok").click(function () {
    //        $("#myModal").modal('hide');
    //    });
});
function createFloor3F() {
    $("#seat-plan").empty();
    $("#seat-plan").append('<p>3F</p>');
    $("#seat-plan").append('<div class="row"><div class="col-lg-6"></div></div>');
    for (var j = 0; j < 9; j++) {
        $("#seat-plan").children().last().children().last().append('<div class="block-1"></div>');
        for (var k = 1; k < 5; k++) {
            $("#seat-plan").children().last().children().last().children().last().append('<div class="row"><div class="col-lg-12"></div></div>');
            for (var l = 0; l < 2; l++) {
                $("#seat-plan").children().last().children().last().children().last().children().last().children().last().append('<div class="seat-1"></div>');
                //$("#seat-plan").children().last().children().last().children().last().children().last().children().last().children().last().html(k);
            }
        }
        $("#seat-plan").children().last().children().last().children().last().append('<div class="clearfix">&nbsp</div>');
        for (var k = 5; k < 9; k++) {
            $("#seat-plan").children().last().children().last().children().last().append('<div class="row"><div class="col-lg-12"></div></div>');
            for (var l = 0; l < 2; l++) {
                $("#seat-plan").children().last().children().last().children().last().children().last().children().last().append('<div class="seat-1"></div>');
                //$("#seat-plan").children().last().children().last().children().last().children().last().children().last().children().last().html(k);
            }
        }
    }

    //NEXT
    $("#seat-plan").children().last().append('<div class="col-lg-6"></div>');
    for (var j = 0; j < 9; j++) {
        $("#seat-plan").children().last().children().last().append('<div class="block-1"></div>');
        for (var k = 1; k < 5; k++) {
            $("#seat-plan").children().last().children().last().children().last().append('<div class="row"><div class="col-lg-12"></div></div>');
            for (var l = 0; l < 2; l++) {
                $("#seat-plan").children().last().children().last().children().last().children().last().children().last().append('<div class="seat-1"></div>');
                //$("#seat-plan").children().last().children().last().children().last().children().last().children().last().children().last().html(k);
            }
        }
        $("#seat-plan").children().last().children().last().children().last().append('<div class="clearfix">&nbsp</div>');
        for (var k = 5; k < 9; k++) {
            $("#seat-plan").children().last().children().last().children().last().append('<div class="row"><div class="col-lg-12"></div></div>');
            for (var l = 0; l < 2; l++) {
                $("#seat-plan").children().last().children().last().children().last().children().last().children().last().append('<div class="seat-1"></div>');
                //$("#seat-plan").children().last().children().last().children().last().children().last().children().last().children().last().html(k);
            }
        }
    }

    //NEXT
    $("#seat-plan").children().last().append('<div class="col-lg-6"></div>');
    for (var j = 0; j < 9; j++) {
        $("#seat-plan").children().last().children().last().append('<div class="block-1"></div>');
        for (var k = 1; k < 5; k++) {
            $("#seat-plan").children().last().children().last().children().last().append('<div class="row"><div class="col-lg-12"></div></div>');
            for (var l = 0; l < 2; l++) {
                $("#seat-plan").children().last().children().last().children().last().children().last().children().last().append('<div class="seat-1"></div>');
                //$("#seat-plan").children().last().children().last().children().last().children().last().children().last().children().last().html(k);
            }
        }
        $("#seat-plan").children().last().children().last().children().last().append('<div class="clearfix">&nbsp</div>');
        for (var k = 5; k < 9; k++) {
            $("#seat-plan").children().last().children().last().children().last().append('<div class="row"><div class="col-lg-12"></div></div>');
            for (var l = 0; l < 2; l++) {
                $("#seat-plan").children().last().children().last().children().last().children().last().children().last().append('<div class="seat-1"></div>');
                //$("#seat-plan").children().last().children().last().children().last().children().last().children().last().children().last().html(k);
            }
        }
    }

    //NEXT
    $("#seat-plan").children().last().append('<div class="col-lg-6"></div>');
    for (var j = 0; j < 9; j++) {
        $("#seat-plan").children().last().children().last().append('<div class="block-1"></div>');
        for (var k = 1; k < 5; k++) {
            $("#seat-plan").children().last().children().last().children().last().append('<div class="row"><div class="col-lg-12"></div></div>');
            for (var l = 0; l < 2; l++) {
                $("#seat-plan").children().last().children().last().children().last().children().last().children().last().append('<div class="seat-1"></div>');
                //$("#seat-plan").children().last().children().last().children().last().children().last().children().last().children().last().html(k);
            }
        }
        $("#seat-plan").children().last().children().last().children().last().append('<div class="clearfix">&nbsp</div>');
        for (var k = 5; k < 9; k++) {
            $("#seat-plan").children().last().children().last().children().last().append('<div class="row"><div class="col-lg-12"></div></div>');
            for (var l = 0; l < 2; l++) {
                $("#seat-plan").children().last().children().last().children().last().children().last().children().last().append('<div class="seat-1"></div>');
                //$("#seat-plan").children().last().children().last().children().last().children().last().children().last().children().last().html(k);
            }
        }
    }
}

function populateQuadrantB() {
    $("#seat-plan").empty();
    $("#seat-plan").append('<p>PIC-3F-B</p>');
    $("#seat-plan").append('<div class="row"><div class="col-lg-12"></div></div>');
    for (var j = 0; j < 9; j++) {
        $("#seat-plan").children().last().children().last().append('<div class="block-1"></div>');
        for (var k = 1; k < 5; k++) {
            $("#seat-plan").children().last().children().last().children().last().append('<div class="row"><div class="col-lg-12"></div></div>');
            for (var l = 0; l < 2; l++) {
                $("#seat-plan").children().last().children().last().children().last().children().last().children().last().append('<div class="seat"></div>');
                $("#seat-plan").children().last().children().last().children().last().children().last().children().last().children().last().html(k);
            }
        }
    }

    $("#seat-plan").append('<div class="row"><div class="col-lg-12"></div></div>');
    for (var j = 0; j < 9; j++) {
        $("#seat-plan").children().last().children().last().append('<div class="block-1"></div>');
        for (var k = 5; k < 8; k++) {
            $("#seat-plan").children().last().children().last().children().last().append('<div class="row"><div class="col-lg-12"></div></div>');
            for (var l = 0; l < 2; l++) {
                $("#seat-plan").children().last().children().last().children().last().children().last().children().last().append('<div class="seat"></div>');
                $("#seat-plan").children().last().children().last().children().last().children().last().children().last().children().last().html(k);
            }
        }
    }

    setDroppable();
}

function populateQuadrantA() {
    $("#seat-plan").empty();
    var columns = 6;
    var block1 = 4;
    block1++;
    var block2 = 3;

    var col1;
    var col2;
    var allowDrop = 0;

    $("#seat-plan").append('<p>PIC-3F-A</p>');
    $("#seat-plan").append('<div class="row"><div class="col-lg-12"></div></div>');
    for (var j = 1; j <= columns; j++) {
        var seatLoc = j * 2;
        col2 = seatLoc;
        col1 = seatLoc - 1;
        $("#seat-plan").children().last().children().last().append('<div class="block-1"></div>');
        for (var k = 1; k < block1; k++) {
            $("#seat-plan").children().last().children().last().children().last().append('<div class="row"><div class="col-lg-12"></div></div>');
            for (var l = 0; l < 2; l++) {
                allowDrop++;
                if (allowDrop < 4) {
                    $("#seat-plan").children().last().children().last().children().last().children().last().children().last().append('<div class="seat drop-block"></div>');
                }
                else {
                    $("#seat-plan").children().last().children().last().children().last().children().last().children().last().append('<div class="seat"></div>');
                }

                if (l == 0) {
                    $("#seat-plan").children().last().children().last().children().last().children().last().children().last().children().last().html(col1 + "-" + k);
                }
                if (l == 1) {
                    $("#seat-plan").children().last().children().last().children().last().children().last().children().last().children().last().html(col2 + "-" + k);
                }
            }
        }
    }

    allowDrop = 0;
    $("#seat-plan").append('<div class="row"><div class="col-lg-12"></div></div>');

    for (var j = 1; j <= columns; j++) {
        var seatLoc = j * 2;
        col2 = seatLoc;
        col1 = seatLoc - 1;
        $("#seat-plan").children().last().children().last().append('<div class="block-1"></div>');
        for (var k = block1; k < block1 + block2; k++) {
            $("#seat-plan").children().last().children().last().children().last().append('<div class="row"><div class="col-lg-12"></div></div>');
            for (var l = 0; l < 2; l++) {
                allowDrop++;
                if (allowDrop < 1) {
                    $("#seat-plan").children().last().children().last().children().last().children().last().children().last().append('<div class="seat drop-block"></div>');
                }
                else {
                    $("#seat-plan").children().last().children().last().children().last().children().last().children().last().append('<div class="seat"></div>');
                }

                if (l == 0) {
                    $("#seat-plan").children().last().children().last().children().last().children().last().children().last().children().last().html(col1 + "-" + k);
                }
                else if (l == 1) {
                    $("#seat-plan").children().last().children().last().children().last().children().last().children().last().children().last().html(col2 + "-" + k);
                }
            }
        }
    }

    setDroppable();
}

function setDroppable() {

    $(".drop-block").droppable({
        drop: function (event, ui) {

            $(this).addClass("dropped-color");

            var seatCode = "PIC3FA" + $(this).html();
            var name = $.trim(ui.draggable[0].innerText);
            $(this).popover({ title: seatCode, content: name, placement: 'top', trigger: 'hover', container: '#seat-plan', html: true });

            $(this).click(function () {
                var blockSelector = this;
                $('.modal-title').empty();
                $('.modal-body').empty();
                $('.modal-title').append(seatCode);
                $('.modal-body').append('<p value="' + name + '">' + name + '&nbsp&nbsp<a class="remove-employee-seat" href="#">Remove</a></p>');

                $('.remove-employee-seat').click(function () {
                    $("#modal-ok").unbind('click');
                    var htmlValue = $(this).html();
                    $(this).empty();
                    if (htmlValue == 'Will Remove') {
                        $(this).html('Remove');
                    }

                    else if (htmlValue == 'Remove') {
                        $(this).html('Will Remove');
                    }

                    $("#modal-ok").click(function () {
                        $("#modal-ok").attr('disabled', 'disabled');
                        $("#modal-cancel").attr('disabled', 'disabled');
                        if ($("#resources ul li").length < 1) {
                            $("#resources p").remove();
                        }
                        $("#resources ul").append('<li class="list-group-item name-drop"></li>');
                        $("#resources ul li").last().append($(".remove-employee-seat").parent().attr("value"));
                        $(blockSelector).popover('destroy');
                        $(blockSelector).removeClass('dropped-color');

                        $(blockSelector).unbind('click');

                        setTimeout(function () {
                            $("#myModal").modal('hide');
                            $("#modal-ok").removeAttr('disabled');
                            $("#modal-cancel").removeAttr('disabled');
                        }, 500);

                        $(".name-drop").draggable({ revert: true, revertDuration: 200, stack: "#resources", cursorAt: { left: 150, top: 40 }, opacity: 0.6 });
                        $("#modal-ok").unbind('click');
                    });

                });

                $('#myModal').modal('show');
            });

            ui.draggable[0].remove();

            if ($("#resources ul li").length == 0) {
                $("#resources").append('<p style="color:Gray;">All Resources has assigned Shift</p>');
            }
        },
        hoverClass: "drop-hover",
        tolerance: "pointer"
    });
}